<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>工作量计算系统</title>
    <meta HTTP-EQUIV="pragma" CONTENT="no-cache">
    <meta HTTP-EQUIV="Cache-Control" CONTENT="no-store, must-revalidate">
    <meta HTTP-EQUIV="expires" CONTENT="Wed, 26 Feb 1997 08:21:57 GMT">
    <meta HTTP-EQUIV="expires" CONTENT="0">


    <link rel="Shortcut Icon" href="../images/favicon.ico"/>
    <link rel="stylesheet" href="../src/css/layui.css">
    <link rel="stylesheet" href="src/css/layui.css">
    <script src="../src/layui.js"></script>
    <script src="src/layui.js"></script>
    <script src="../js/jquery-3.2.1.js"></script>
    <script src="js/jquery-3.2.1.js"></script>

    <!--必须放最后-->
    <script src="../js/setting.js"></script>
    <script src="js/setting.js"></script>
</head>
<body>

<header>

</header>


<main>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>文件操作</legend>
    </fieldset>

    <div class="layui-upload">
        <button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件</button>
        <button type="button" class="layui-btn" id="test9">开始上传</button>
        <form class="layui-form" style="float: right" action="" method="post">
            <div class="layui-form-item">
                <div class="layui-input-inline"><select name="time" lay-verify="">
                    <option value="">全部</option>
                    <option value="2015">2015</option>
                    <option value="2016">2016</option>
                    <option value="2017" selected>2017</option>
                    <option value="2018">2018</option>
                    <option value="2018">2019</option>
                </select></div>
                <div class=" layui-input-inline"><input type="text" name="teacher" placeholder="教师" autocomplete="off"
                                                        class="layui-input"></div>
                <div class=" layui-input-inline">
                    <button class="layui-btn" lay-submit lay-filter="search">查询</button>
                    <button class="layui-btn" lay-submit lay-filter="download">下载</button>
                </div>
            </div>
        </form>
    </div>


    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>毕业设计 - 教师补贴</legend>
    </fieldset>

    <div class="layui-btn-group">
        <!--//刷新-->
        <a class="layui-btn layui-btn-sm" href="javascript:location.replace(location.href);"> <i class="layui-icon">&#x1002;</i>
        </a>
        <!-- //添加-->
        <button class="layui-btn layui-btn-sm" onclick="ToolBar.add(
            {
                'college':'*学院',
                'teacher':'*教师姓名',
                'lesson':'*课程名称',
                'years':'*年级',
                'grades':'*专业班级',
                'people':'*学生人数',
                'weeks':'周数',
                'workload':'课时',
                'money':'酬金',
                'note':'备注'
            },
            myGlobal.REMOTE_GRADUATE_DESIGN+'/add'
            );">
            <i class="layui-icon">&#xe654;</i>
        </button>
        <!--//删除-->
        <button class="layui-btn layui-btn-sm"
                onclick="ToolBar.remove('teachTable',myGlobal.REMOTE_GRADUATE_DESIGN+'/delete');">
            <i class="layui-icon">&#xe640;</i>
        </button>
    </div>

    <table class="layui-table" lay-data="" id="teachTable" lay-filter="teachTable"></table>
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-primary layui-btn-mini" lay-event="save">保存</a>
        <a class="layui-btn layui-btn-danger layui-btn-mini" lay-event="del">删除</a>
    </script>

</main>


</body>

<script>

    layui.use('upload', function () {
        var upload = layui.upload; //得到 upload 对象

        //选完文件后不自动上传
        upload.render({
            elem: '#test8'
            , url: '/uploadExcel?type=RGra'
            , auto: false
            , accept: 'file'
            , exts: 'xls|xlsx'
            , bindAction: '#test9'
            , done: function (res) {
                if (res['status'] == 0) {
                    layer.confirm(res['msg'], {
                        btn: ['确定'] //按钮
                    });
                } else {
                    layer.confirm("导入出错数据：" + "<br>" + res['msg'], {
                        btn: ['确定'] //按钮
                    });
                }
                setTimeout("$('.layui-laypage-btn').click();", 2000)
            }
            , error: function () {
                layer.msg("请稍后重试。");
            }
        });

    });
    layui.use(['table', 'jquery', 'form'], function () {
        var form = layui.form;
        var $ = layui.$;
        var table = layui.table;
        var index;
        $("#teachTable").ready(function () {
            index = layer.msg('加载中', {
                icon: 16
                , shade: 0.01
            });
        });

        var tableParam = { //其它参数在此省略
            id: 'teachTable',
            elem: '#teachTable',
            url: '/RGra/' + (new Date().getFullYear() - 1) + "/null",
            page: true,
            limits: [10, 20, 50, 100, 300],
            limit: 10,
            response: {
                statusName: 'status' //数据状态的字段名称，默认：code
                , statusCode: 0 //成功的状态码，默认：0
                , msgName: 'msg' //状态信息的字段名称，默认：msg
                , countName: 'count' //数据总数的字段名称，默认：count
                , dataName: 'data' //数据列表的字段名称，默认：data
            }
            /*            ,height:'full-336',*/
            , cols: [[
                {checkbox: true, fixed: true},
                {field: 'id', fixed: true, width: 70, title: 'ID'},
                {field: 'college', edit: true, width: 100, title: '学院'},
                {field: 'teacher', edit: true, width: '100', title: '教师'},
                {field: 'years', edit: true, width: 70, title: '年级'},
                {field: 'grades', edit: true, width: 100, title: '专业班级'},
                {field: 'people', edit: true, width: 100, title: '学生人数', templet: '#peopleTpl'},
                {field: 'weeks', edit: true, width: '70', title: '周数'},
                {field: 'workload', edit: true, width: '70', title: '课时'},
                {field: 'money', edit: false, width: '70', title: '酬金'},
                {field: 'note', edit: true, width: 100, title: '备注'},
                {title: '操作', width: 120, align: 'center', toolbar: '#barDemo'}

            ]]
            , done: function (res, curr, count) {
                console.log(res);
                layer.close(layer.index);
            }
        }
        var tableObj = table.render(tableParam);
        form.render();
        form.on('submit(search)', function (data) {
            layer.msg('加载中', {icon: 16, shade: 0.01});
            ToolBar.searchlist(tableParam, "RGra", data, tableObj);
            return false;
        });
        form.on('submit(download)', function (data) {
            ToolBar.downdetail(data, "RGra");
            return false;
        });


        table.on('edit(teachTable)', function (obj) {
            var value = obj.value //得到修改后的值
                , data = obj.data //得到所在行所有键值
                , field = obj.field; //得到字段
            //实验上机

            data.workload = 0.9 * data.weeks * data.people;
            data.workload = Math.round(data.workload * 100) / 100;
            data.money = 70 * data.workload;
            data.money = Math.round(data.money * 100) / 100;

            layer.msg('[教师: ' + data.teacher + '] ' + field + ' 更改为：' + value + "<br>确认修改后点击保存。");

        });
        table.on('tool(teachTable)', function (obj) {
            var data = obj.data;
            var tr = obj.tr;
            if (obj.event === 'save') {
                //layer.msg('保存：<br>'+ JSON.stringify(data));
                //ajax上传服务器
                //$('.layui-laypage-btn').click();
                $.ajax({
                    type: 'post'
                    , url: "/saveRemoteGra"
                    , data: {"data": JSON.stringify(data)}
                    , dataType: 'json'
                    , contentType: 'application/x-www-form-urlencoded;charset=UTF-8'
                    , success: function (res) {
                        if (res["status"] == 1) {
                            layer.msg(res['msg'], {
                                icon: 2,
                                time: 1000
                            });
                        } else {
                            layer.msg(res['msg'], {
                                icon: 1,
                                time: 1000
                            });
                        }
                        setTimeout("$('.layui-laypage-btn').click();", 2000)
                    }
                    , error: function (res) {
                        layer.msg(res['msg']);
                        setTimeout("$('.layui-laypage-btn').click();", 2000)
                    }
                });
            } else if (obj.event === 'del') {
                layer.confirm('真的删除该行么', function (sure) {
                    $.ajax({
                        type: 'post'
                        , url: "/removeRemoteGra"
                        , data: {"data": JSON.stringify(data)}
                        , dataType: 'json'
                        , contentType: 'application/x-www-form-urlencoded;charset=UTF-8'
                        , success: function (res) {
                            if (res["status"] == 1) {
                                layer.msg(res['msg'], {
                                    icon: 2,
                                    time: 1000
                                });
                            } else {
                                layer.msg(res['msg'], {
                                    icon: 1,
                                    time: 1000
                                });
                            }
                        }
                        , error: function (res) {
                            layer.msg(res['msg']);
                        }
                    });
                    obj.del();
                    layer.close(sure);
                    $('.layui-laypage-btn').click();
                });
            }
            return false;
        });
    });
</script>
<script type="text/html" id="peopleTpl">
    {{#  if(d.people > 8){ }}
    <span style="color: #ff0000;">{{ d.people }}</span>
    {{#  } else { }}
    {{ d.people }}
    {{#  } }}
</script>
</html>